<template>
    <div>
        <el-button type='text' @click="dialogFormVisible=true">打开</el-button>
       
        <el-dialog title="这是表单" :visible.sync="dialogFormVisible">
           
            <el-form ref='form' :model='formData'>
                <el-form-item label='名字' prop='name'>
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                 <el-form-item label='年龄' prop='age'>
                    <el-input v-model="formData.age"></el-input>
                </el-form-item>
                 <el-form-item label='性别' prop='sex'>
                    <el-input v-model="formData.sex"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="confirm">确定</el-button>
            </div>
        </el-dialog>

        <el-pagination 
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page.sync="currentPage1"
           :page-size="100"
           layout="total, prev, pager, next"
           :total="1000">
        >
        </el-pagination>
    </div>
</template>

<script>
export default {
    data(){
        return{
            dialogFormVisible:false,
            formData:{
                name:'',
                age:'',
                sex:''
            }
        }
    },
    methods:{
        cancel(){
            this.dialogFormVisible=false
        },
        confirm(){
            this.dialogFormVisible=false
        },
    }
}
</script>